import React, { useMemo } from 'react'
import { Tree, } from 'antd';
import type { TreeDataNode, TreeProps } from 'antd';
import { useComponentsStore } from '../../stores/components'
import { DownOutlined } from '@ant-design/icons';

const treeData: TreeDataNode[] = [
    // {
    //     title: 'parent 1',
    //     key: '0-0',
    //     children: [
    //         {
    //             title: 'parent 1-0',
    //             key: '0-0-0',
    //             children: [
    //                 {
    //                     title: 'leaf',
    //                     key: '0-0-0-0',
    //                 },
    //                 {
    //                     title: 'leaf',
    //                     key: '0-0-0-1',
    //                 },
    //                 {
    //                     title: 'leaf',
    //                     key: '0-0-0-2',
    //                 },
    //             ],
    //         },
    //         {
    //             title: 'parent 1-1',
    //             key: '0-0-1',
    //             children: [
    //                 {
    //                     title: 'leaf',
    //                     key: '0-0-1-0',
    //                 },
    //             ],
    //         },
    //         {
    //             title: 'parent 1-2',
    //             key: '0-0-2',
    //             children: [
    //                 {
    //                     title: 'leaf',
    //                     key: '0-0-2-0',
    //                 },
    //                 {
    //                     title: 'leaf',
    //                     key: '0-0-2-1',
    //                 },
    //             ],
    //         },
    //     ],
    // },
];
export default function Outline() {
    const { components,setCurComponentId } = useComponentsStore()
    return (
        <Tree 
            showLine
            fieldNames={{
                title:'desc',
                key:'id',
            }}
            defaultExpandedKeys={['0-0-0']}
            defaultExpandAll={true}
            treeData={components as any} 
            switcherIcon={<DownOutlined />}
            onSelect={([selectedKey]) => {
                setCurComponentId(selectedKey as number)
            }}
            />
    )
}
